<template>
	<div class="f-container-panel">
		<div v-for="item in state.nodeList" :key="item.text" class="node-item" @mousedown="dragNode(item)">
			<div class="node-item-icon" :class="item.class">
				<div v-if="item.type === 'user' || item.type === 'time'" class="shape" />
			</div>
			<span class="node-label">{{ item.text }}</span>
		</div>
	</div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

var props = defineProps({
	lf: Object,
});

const state = reactive({
	nodeList: [
		{
			text: '开始',
			type: 'bpmn:startEvent',
			class: 'bpmn-start',
		},
		{
			text: '用户',
			type: 'bpmn:userTask',
			class: 'bpmn-user',
		},
		{
			type: 'bpmn:exclusiveGateway',
			text: '网关',
			class: 'bpmn-exclusiveGateway',
		},
		{
			type: 'task-node',
			text: '任务',
			class: 'node-task',
		},
		{
			text: '结束',
			type: 'bpmn:endEvent',
			class: 'bpmn-end',
		},
	],
});

const dragNode = (item: any) => {
	props.lf.dnd.startDrag({
		type: item.type,
	});
};
</script>

<style lang="scss" scoped>
.f-container-panel {
	position: absolute;
	top: 10px;
	left: 15px;
	width: 60px;
	padding: 20px 10px;
	background-color: white;
	box-shadow: 0 0 10px 1px rgb(228, 224, 219);
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 101;
	.node-item {
		margin-bottom: 15px;
		text-align: center;
	}
	.node-item-icon {
		width: 30px;
		height: 30px;
		background-size: cover;
	}
	.node-label {
		font-size: 12px;
		margin-top: 5px;
		user-select: none;
	}
	.node-rect {
		border: 1px solid black;
	}
	.node-task {
		background: url()
			center center no-repeat;
		cursor: grab;
	}
	.bpmn-start {
		background: url()
			center center no-repeat;
		cursor: grab;
	}
	.bpmn-end {
		background: url()
			center center no-repeat;
		cursor: grab;
	}
	.bpmn-user {
		background: url()
			center center no-repeat;
		cursor: grab;
	}
	.bpmn-exclusiveGateway {
		background: url()
			center center no-repeat;
		cursor: grab;
	}
}
</style>
